<template>
    <div template>
        <tops nowposi="hide" showback="1" customTitle="商品详情" righttop="hide">
            <div template>
                <div style="position: relative; height: 650rpx;background-color: #ccc;">
                    <swiper style="height:100%" :current="index" @change="index = $event.detail.current">
                        <swiper-item v-for="v in list">
                            <image style="height: 100%;width:100%" :src="v"></image>
                        </swiper-item>
                    </swiper>
                    <div
                        style="position: absolute;right:10rpx;bottom:10rpx;padding: 5rpx;background-color: rgba(255, 255, 255, .5);">
                        {{ index + 1 }} / {{ list.length }}</div>
                </div>
                <!-- CONT -->
                <div style="padding:20rpx 20rpx 0; font-size: 50rpx;font-weight: 800;">商品标题</div>
                <div style="padding:20rpx; font-size: 30rpx;font-weight: 800;color: #999;border-bottom: 2rpx solid #ccc;">
                    商品描述</div>
                <div style="padding:10rpx 20rpx; font-size: 24rpx;color: #999;border-bottom: 2rpx solid #ccc;">
                    售后服务：7天无条件退款
                </div>
                <div style="padding:10rpx 20rpx; font-size: 24rpx;color: #999;border-bottom: 22rpx solid #eee;">
                    详情信息：
                    <div style="margin-top:10rpx; word-break: break-all;">
                        xxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkk
                    </div>
                </div>
                <!-- CONMONSITION -->
                <div style="padding:20rpx;font-size: 26rpx;">
                    商品评价：
                    <div style="padding-top: 20rpx;" v-for="v in 3">
                        <div style="float: left;padding: 0rpx 20rpx 20rpx 0;">
                            <image style="width:50rpx;height:50rpx;background-color: #999;border-radius:50%;"></image>
                        </div>
                        <div style="margin-left: 70rpx;">
                            111
                            <div style="margin-top:20rpx; word-break: break-all;">
                                xxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkkxxxkkk
                            </div>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
                <!-- FIX BOTTOM -->
                <!-- <div
                    style="position: fixed;bottom: 0;left:0;width: 100%;background-color: white;border-top:2rpx solid #ccc">
                    <div style="padding:20rpx 0 20rpx 20rpx;height: 120rpx;box-sizing: border-box;">
                        <div style=" float:left;width: 12%;height: 80rpx;"></div>
                        <div style=" float:left;width: 12%;height: 80rpx;"></div>
                        <div style=" float:left;width: 12%;height: 80rpx;"></div>
                        <div style=" float:left;margin-top:-20rpx;width: 32%;height: 120rpx;background-color: coral;"></div>
                        <div style=" float:left;margin-top:-20rpx;width: 32%;height: 120rpx;background-color: crimson;">
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div> -->
            </div>
        </tops>
    </div>
</template>

<script>
import shopimg from '../../assets/20230517164415.png'
import shopimg2 from '../../assets/20230517164605.png'
export default {
    data() {
        return {
            list: [shopimg, shopimg2],
            index: 0,
        }
    }
}
</script>